<!--
 * @Descripttion: GOGOGO
 * @version: 1.0.0
 * @Author: XJM
 * @Date: 2022-08-15 08:56:31
 * @LastEditors: XJM
 * @LastEditTime: 2022-08-22 21:45:59
-->
<template>
    <div>
        <!-- 面包屑 -->
        <el-breadcrumb :separator-icon="ArrowRight">
            <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>账号列表</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 白色内容区域 -->
        <div class="page_content">
            <!-- 搜索 -->
            <div class="flex">
                <div class="input_box">
                    <el-input v-model="searchParams.query" placeholder="请输入关键字" class="input-with-select">
                        <template #append>
                            <el-button @click="searchUser">
                                <el-icon>
                                    <Search />
                                </el-icon>
                            </el-button>
                        </template>
                    </el-input>
                </div>
                <el-button type="primary" @click="addUser">添加新用户</el-button>
            </div>
            <!-- 
              el-table 的 data:要展示的数据数组
              el-table-column：列 prop每条数据的对应属性
              label：列标题
              scope.row:相当于一条数据
             -->
            <!-- 用户表格 -->
            <el-table :data="userList" stripe style="width: 100%">
                <el-table-column prop="id" label="ID" />
                <el-table-column prop="username" label="姓名" />
                <el-table-column prop="email" label="邮箱" />
                <el-table-column prop="mobile" label="电话" />
                <el-table-column prop="role_name" label="角色" />
                <!-- mg_state 用户状态 -->
                <el-table-column prop="mg_state" label="状态">
                    <template #default="scope">
                        <el-switch v-model="scope.row.mg_state" @change="switchChange(scope.row)" />
                    </template>
                </el-table-column>
                <!-- 操作 -->
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button type="primary" @click="editRow(scope.row)">编辑</el-button>
                        <el-button type="danger" @click="deleteRow(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 新增用户dialog 弹窗 -->
        <el-dialog v-model="dialogTableVisible" title="添加新用户">
            <!--表单-->
            <el-form ref="userForm" :model="formData" :rules="rules">
                <el-form-item label="用户名称:" prop="username">
                    <el-input v-model="formData.username" placeholder="请输入用户名称" />
                </el-form-item>
                <el-form-item label="用户密码:" prop="password">
                    <el-input v-model="formData.password" placeholder="请输入密码" />
                </el-form-item>
                <el-form-item label="用户邮箱:" prop="email">
                    <el-input v-model="formData.email" placeholder="请输入邮箱" />
                </el-form-item>
                <el-form-item label="联系电话:" prop="mobile">
                    <el-input v-model="formData.mobile" placeholder="请输入联系电话" />
                </el-form-item>
            </el-form>
            <!-- 按钮 -->
            <template #footer>
                <div class="flex addsure">
                    <el-button @click="dialogTableVisible = false">取消</el-button>
                    <el-button type="primary" @click="submitForm(userForm)">确定</el-button>
                </div>
            </template>
        </el-dialog>
        <!-- 编辑用户信息弹窗 -->
        <el-dialog v-model="dialogFormVisible" title="编辑用户信息">
            <!--表单-->
            <el-form ref="userForm2" :model="formData2" rules="rules2">
                <el-form-item label="用户邮箱:" prop="email">
                    <el-input v-model="formData2.email" placeholder="请输入邮箱" />
                </el-form-item>
                <el-form-item label="联系电话:" prop="mobile">
                    <el-input v-model="formData2.mobile" placeholder="请输入联系电话" />
                </el-form-item>
            </el-form>
            <!-- 按钮 -->
            <template #footer>
                <div class="flex addsure">
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="submitEForm(userForm2)">确定</el-button>
                </div>
            </template>
        </el-dialog>
        <!-- 数据分页 -->
        <div class="demo-pagination-block">
            <el-pagination v-model:currentPage="searchParams.pagenum" v-model:page-size="searchParams.pagesize"
                :page-sizes="[2, 5, 10, 20]" :small="small" :disabled="disabled" :background="background"
                layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="searchUser"
                @current-change="searchUser" />
        </div>
    </div>
</template>

<script>
import { toRefs, reactive, ref } from 'vue';
import { userListApi, userAddApi, userChangeStateApi, userChangeInfoApi, userDeleteApi } from '@/util/request.js'

export default {
    name: 'roles',
    setup() {
        const data = reactive({
            keyWord: "",
            searchParams: {
                // 查询参数
                query: "",
                // 每页有几条数据
                pagesize: 2,
                // 初始页在第几页
                pagenum: 1
            },
            // 数据条数
            total: 0,
            // 用户数据
            userList: [],
            // 添加新用户弹窗
            dialogTableVisible: false,
            // 编辑用户信息弹窗
            dialogFormVisible: false,
            // 添加新用户表单数据
            formData: {
                username: "",
                password: "",
                email: "",
                mobile: "",
            },
            // 编辑用户表单数据
            formData2: {
                id: "",
                email: "",
                mobile: "",
            },
            // 表单验证
            rules: {
                username: [
                    { required: true, message: '请输入用户名!', trigger: 'blur' },
                    { min: 3, max: 8, message: '用户名长度在3~8之间!', trigger: 'blur' },
                ],
                password: [
                    { required: true, message: '请输入密码!', trigger: 'blur' },
                ],
                email: [
                    {
                        required: false,
                        pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
                        message: "请输入正确邮箱格式!", trigger: "blur"
                    }
                ],
                mobile: [
                    {
                        required: false,
                        pattern: /^[1][3,4,5,7,8][0-9]{9}$/,
                        message: "请输入正确的手机号!", trigger: "blur"
                    }
                ]
            },

        })
        // 查找用户
        const searchUser = () => {
            userListApi(data.searchParams).then(res => {
                if (res.data) {
                    // 
                    console.log("用户数据", res);
                    data.userList = res.data.users;
                    data.total = res.data.total;
                }
            })
        }
        // 添加新用户
        const addUser = () => {
            data.dialogTableVisible = true
        }
        // 提交新增表单
        const submitForm = (formEl) => {
            // validate
            formEl.validate(res => {
                if (!res) {
                    return
                }
                // 表单验证通过
                userAddApi(data.formData).then(res => {
                    if (res.data) {
                        // 关闭弹窗
                        data.dialogTableVisible = false
                        // 清空表单
                        data.formData = {
                            username: "",
                            password: "",
                            email: "",
                            mobile: "",
                        }
                        ElMessage.success("添加新用户成功!")
                        // 重新渲染列表 
                        searchUser()
                    }
                })
            })
        }
        // 提交编辑表单
        const submitEForm = (formEl) => {
            formEl.validate(res => {
                if (!res) {
                    return
                }
                // 验证通过提交修改
                userChangeInfoApi(data.formData2).then(res => {
                    if (res.data) {
                        // 关闭弹窗
                        data.dialogFormVisible = false
                        ElMessage.success("更改成功!")
                        // 重新渲染列表 
                        searchUser()
                    }
                })
            })
        }
        // 用户状态切换
        const switchChange = row => {
            console.log("操作这条数据", row);
            userChangeStateApi(row).then(res => {
                if (res.data) {
                    searchUser();
                }
                ElMessage.success("状态切换成功!")
            })
        }
        // 编辑用户信息
        const editRow = row => {
            console.log("编辑这条数据", row);
            // 展示编辑表单
            data.dialogFormVisible = true;
            data.formData2.email = row.email
            data.formData2.mobile = row.mobile
            data.formData2.id = row.id
        }
        // 删除用户
        const deleteRow = (row) => {
            ElMessageBox.confirm(
                '你确定删除吗?',
                '提示',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }).then(() => {
                    userDeleteApi(row).then(res => {
                        searchUser()
                        ElMessage({
                            type: 'success',
                            message: '删除成功!',
                        })
                    })
                }).catch(() => {
                    ElMessage({
                        type: 'info',
                        message: '取消删除!',
                    })
                })
        }
        // 方法初始化
        searchUser()
        const userForm = ref()
        const userForm2 = ref()
        return {
            ...toRefs(data),
            searchUser,
            addUser,
            submitForm,
            userForm,
            userForm2,
            switchChange,
            editRow,
            submitEForm,
            deleteRow,
        }
    }
}
</script>

<style scoped>
.input_box {
    width: 300px;
    margin-right: 15px;
}

.demo-pagination-block {
    margin-top: 10px;
    margin-left: 50%;
    transform: translateX(-50%);
    display: block;
}
</style>